<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
        <a-col :span="24">
          <a-card>
            <div class="box-ver-hor-between">
              <div class="primary-color">{{t(`content-manage.label.edit`)}}</div>
              <div>
                <a-button type="primary" @click="onSubmit">{{t(`button.save`)}}</a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="24">
          <a-card>
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col :span="8">
                  <a-form-item :label="t(`content-manage.label.category`)" :label-col="{span: 6}">
                    <div>{{'关于我们'}}</div>
                  </a-form-item>
                </a-col>
                <a-col :span="16">
                  <a-form-item :label="t(`content-manage.label.lastModified`)" :label-col="{span: 9}">
                    <div style="width:100%">{{'2021-08-29 10:20'}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-item :label="t(`content-manage.label.explain`)" :label-col="{span: 2}" :wrapper-col="{span: 24}">
                    <div>{{'关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们'}}</div>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item :label="t(`content-manage.label.title`)" :wrapper-col="{span: 18}">
                <a-input v-model:value="formState.name" />
              </a-form-item>
              <a-form-item :label="t(`content-manage.label.informationContent`)" :wrapper-col="{span: 24}">
                <TinyMCE />
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script>
import TinyMCE from '@/component/tinymce';
import {defineComponent, reactive, toRaw, ref} from 'vue';
import { useI18n } from "vue-i18n";

export default defineComponent({
  name: "add",
  components: {
    TinyMCE
  },
  setup() {

    const { t } = useI18n();

    const formState = reactive({
      name: '',
      region: undefined,
      date1: undefined,
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });

    const onSubmit = () => {
      console.log('submit!', toRaw(formState));
    };

    const loading = ref(false);


    return {
      t,
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 6,
      },
      formState,
      onSubmit,
      loading,
    };
  },
})
</script>

<style lang="less" scoped>
.upload-title {
  font-size: 14px;
  color: #b7b7b7;
}
</style>
